<template>
  <div>
    <div>【大区数据信息】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>
<script setup>
import {ref,onMounted,watch} from 'vue'
import * as echarts from 'echarts'

  const props = defineProps({
    data: {
      type: Object,
      default: () => {},
    },
  });
console.log(props.data)
let mChart = null
const target = ref(null)

onMounted(()=>{
  mChart = echarts.init(target.value)
  renderChart()
})

const renderChart=()=>{
    const options={
        //x轴
        xAxis:{
            show:false,
            type:'value',
            max:function(value){
                return parseInt(value.max * 1.2)
            }
        },
        //y轴
        yAxis:{
            type:'category',
            data:props.data.regions.map(item=>item.name),
            inverse:true,
            axisLine:{show:false},
            axisTick:{show:false},
            axisLabel:{
                color:'#DDDDDD'
            }
        },
        //提示框
        tooltip:{
            show:true
        },
        //图表绘制的位置，对应 上下左右
        grid:{
            top:0,
            left:0,
            bottom:0,
            right:0,
            containLabel:true,
        },
        //核心配置
        series:[
            {
                type:'bar',
                data:props.data.regions.map(item=>({
                    name:item.name,
                    value:item.value
                })),
                showBackground:true,
                backgroundStyle:{
                    color:'rgba(180,180,180,0.2)'
                },
                itemStyle:{
                    color:'#479AD3',
                    borderRadius:5,
                    shadowColor:'rgba(0,0,0,0.5)',
                    shadowBlur:1,
                    
                },
                barWidth:12,
                label:{
                    show:true,
                    position:'right',
                    color:'#fff',
                    // textStyle:{
                    //     color:'#fff',
                    // }
                }
            }
        ]

    }
    mChart.setOption(options)
}

//监听数据的变化
watch(
()=>props.data.regions,
()=>{
    renderChart()
},
{deep:true})
</script>
<style scoped>
</style>
